<template>
  <div>
    <Row>
      <Card>
        <p slot="title">
          <Icon type="navicon-round"></Icon>
          关于【{{title}}】阅读反馈
        </p>
        <Row type="flex" justify="space-between">
          <div>
            家长名：<Input v-model="searchparam.kinsfolkName" placeholder="家长名关键字" style="width: 160px;margin-right: 4px;"
                       clearable/>
            阅读筛选：
            <div class="db_inline">
              <Select v-model="searchparam.read" @on-change="queryFn" style="width: 100px;">
                <Option v-for="item in readList" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
              是否认同
              <Select v-model="searchparam.confirm" @on-change="queryFn" style="width: 100px;">
                <Option v-for="item in confirmList" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
            </div>
            <div class="db_inline" @click="searchFn">
              <Button type="primary" style="margin: 0 4px 0 5px;">
                <Icon type="ios-search-strong" size="15" style="padding: 0 3px 0 0;"></Icon>
                搜索
              </Button>
            </div>
            <div class="db_inline" @click="restFn">
              <Button style="margin-right: 4px;">刷新</Button>
            </div>
          </div>
          <div class="control">
            <Button @click="backFn" type="info">
              <Icon type="arrow-return-left"></Icon>
              <span>返回</span>
            </Button>
            <slot name="operation"></slot>
          </div>
        </Row>
        <Row class="margin-top-10">
          <Table ref="selection" :height='tableHeight' :columns="tableColumns" :data="dataTable"></Table>
        </Row>
        <Row type="flex" justify="end" class="footer">
          <div class="margin-top-10">
            <Page :total="searchparam.total" :current="searchparam.current" :page-size="searchparam.size"
                  @on-change="changeFn" show-elevator></Page>
          </div>
        </Row>
      </Card>
    </Row>
  </div>
</template>

<script>
  import API from "@/api/api";
  import Cookies from 'js-cookie';

  export default {
    data() {
      return {
        title:'',
        readList: [
          {id: '1', name: '已读'},
          {id: '0', name: '未读'},
        ],
        confirmList: [
          {id: '0', name: '未确认'},
          {id: '1', name: '认同'},
          {id: '2', name: '不认同'},
        ],
        tableHeight: '',
        searchparam: {
          noticeId: '',
          kinsfolkName: '',
          confirm: '',
          read: '',
          current: 1,
          size: 20
        },
        dataTable: [],
        tableColumns: [
          {title: '序号', type: 'index', minWidth: 90, align: 'center'},
          {title: '家长名称', key: 'kinsfolkName', minWidth: 200, align: 'center'},
          {
            title: '阅读时间', key: 'readTime', minWidth: 150, align: 'center',
            render: (h, param) => {
              let readTime = param.row.readTime;
              if (!readTime) {
                return h('div', {}, '未阅读');
              }
              return h('div', {}, readTime);
            }
          },
          {
            title: '认同情况', key: 'confirm', minWidth: 150, align: 'center',
            render: (h, param) => {
              let confirm = param.row.confirm;
              if (confirm === 0) {
                return h('div', {}, '未确认');
              } else if (confirm === 1) {
                return h('div', {}, '认同');
              }
              return h('div', {}, '不认同');
            }
          },
        ],
      };
    },
    methods: {
      restFn() {
        this.searchparam.current = 1;
        this.searchparam.kinsfolkName = '';
        this.searchparam.read = '';
        this.searchparam.confirm = '';
        this.queryFn();
      },
      backFn() {
        this.$router.push({
          path: '/notice'
        })
      },
      queryFn() {
        API.fetchNoticeFeed(this.searchparam).then(
          res => {
            this.dataTable = res.data.records;
            this.searchparam.total = res.data.total;
          },
          error => {
            this.$Message.info(error.msg);
          }
        );
      },
      searchFn(text) {
        this.searchparam.current = this.$search.param.current;
        this.queryFn();
      },
      changeFn(val) {
        this.searchparam.current = val;
        this.queryFn();
      },
    },
    mounted() {
      this.queryFn();
      this.searchparam.noticeId = this.$route.query.nId;
      this.title = this.$route.query.n;
      this.tableHeight = window.innerHeight - this.$refs.selection.$el.offsetTop - 290;
    }
  };
</script>
<style type="text/css" scoped>
  .sent_label:before {
    content: '*';
    display: inline-block;
    margin-right: 4px;
    line-height: 1;
    font-family: SimSun;
    font-size: 12px;
    color: #ff3300;
  }

  .status_search {
    margin: 0 0 0 20px;
  }

  .table_content {
    width: 100%;
    max-height: 88%;
    padding: 20px 0;
    overflow: hidden;
    overflow-y: auto;
  }

  .table_list {
    width: 100%;
    border: 1px solid #e3e8ee;
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #657180;
    border-collapse: collapse;
    border-spacing: 0;
  }

  .table_list tr th, .table_list tr td {
    text-align: center;
    border-bottom: 1px solid #e3e8ee;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    border-bottom: 1px solid #e3e8ee;
  }

  .table_list tr th {
    height: 40px;
    font-weight: 700;
  }

  .table_list tr td {
    height: 48px;
  }

  .table_list tr:first-child:hover {
    background: none;
  }

  .table_list tr:hover {
    background: #ebf7ff;
  }

  .table_list tr:last-child td {
    border-bottom: none;
  }

  td.content_box, th.content_box {
    max-width: 300px;
  }

  .btn_list {
    margin: 0 0 10px 0;
  }

  .footer {
    background: #fff;
    padding: 0 16px 15px 0;
  }

  .list_box {
    height: 83%;
    padding: 20px;
    overflow: hidden;
    overflow-y: auto;
    line-height: 30px;
  }

  .tea_select {
    position: relative;
  }

  .tea_select:after {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #C8C8CD;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: relative;
    top: 16px;
    position: absolute;
    right: 10px;
  }

  .all_btn, .teacher_list {
    float: left;
    width: 100px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #ddd;
    text-align: center;
    margin: 0 10px 10px 0;
    border-radius: 4px;
    cursor: pointer;
  }

  .teacher_selected {
    color: #fff;
    border: 1px solid #2db7f5;
    background: #2db7f5;
  }

  .all_selected {
    color: #fff;
    border: 1px solid #f90;
    background: #f90;
    cursor: pointer;
  }

  .selsect_footer button {
    width: 100%;
    text-align: center;
    color: #2db7f5;
  }

  .two_name {
    letter-spacing: 5px;
  }

</style>
